<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #6366f1, #3b82f6);
        }
        .gold-gradient {
            background: linear-gradient(135deg, #f59e0b, #b45309);
        }
        .diamond-gradient {
            background: linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6);
        }
    </style>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 会员卡片 -->
            <div class="gradient-bg px-4 pt-6 pb-8 relative">
                <div class="absolute top-2 right-2">
                    <button class="text-white opacity-80"><i class="fas fa-ellipsis-h"></i></button>
                </div>
                <div class="flex items-center">
                    <div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                        <i class="fas fa-crown text-lg text-yellow-300"></i>
                    </div>
                    <div class="ml-3">
                        <h1 class="text-white text-xl font-bold">知识会员</h1>
                        <p class="text-white text-opacity-80 text-sm mt-1">立即开通会员，畅享全部内容</p>
                    </div>
                </div>
                <div class="mt-6 bg-white bg-opacity-20 rounded-xl p-4">
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-white text-opacity-90 text-sm">您当前还不是会员</p>
                            <p class="text-white text-sm mt-1">开通会员后，可享受更多学习权益</p>
                        </div>
                        <button class="bg-yellow-500 text-white px-4 py-1.5 text-sm font-semibold rounded-full">立即开通</button>
                    </div>
                </div>
            </div>

            <!-- 会员特权 -->
            <div class="px-4 py-5">
                <h2 class="text-lg font-bold mb-4">会员特权</h2>
                <div class="grid grid-cols-4 gap-4">
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-lock-open text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">全部课程</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-download text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">离线下载</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-tag text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">会员折扣</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-headset text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">专属客服</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-gift text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">每月礼包</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-user-edit text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">名师答疑</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-certificate text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">学习证书</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mb-2">
                            <i class="fas fa-comments text-blue-500"></i>
                        </div>
                        <p class="text-xs text-gray-600 text-center">社群活动</p>
                    </div>
                </div>
            </div>

            <div class="px-4 pt-2 pb-4">
                <h2 class="text-lg font-bold mb-4">会员方案</h2>
                
                <!-- 会员卡片 - 月度 -->
                <div class="bg-white border border-gray-200 rounded-xl mb-4 relative overflow-hidden">
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <i class="fas fa-crown text-yellow-500 mr-2"></i>
                                    <h3 class="font-bold">月度会员</h3>
                                </div>
                                <p class="text-sm text-gray-500 mt-1">每月可随时取消</p>
                                <div class="mt-3">
                                    <span class="text-lg font-bold">¥29.9</span>
                                    <span class="text-sm text-gray-500">/月</span>
                                </div>
                            </div>
                            <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
                                <div class="w-3 h-3 rounded-full bg-blue-500 hidden"></div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <ul class="text-sm text-gray-600 space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>全站所有课程无限制观看</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>每月可下载5门课程</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>专属客服在线答疑</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 会员卡片 - 年度 -->
                <div class="bg-white border-2 border-blue-500 rounded-xl mb-4 relative overflow-hidden">
                    <div class="absolute -right-8 top-5 bg-blue-500 text-white text-xs py-1 px-10 transform rotate-45">
                        推荐
                    </div>
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <i class="fas fa-crown text-yellow-500 mr-2"></i>
                                    <h3 class="font-bold">年度会员</h3>
                                    <span class="ml-2 text-xs text-white bg-red-500 px-1.5 py-0.5 rounded">省240元</span>
                                </div>
                                <p class="text-sm text-gray-500 mt-1">一次付费，全年使用</p>
                                <div class="mt-3">
                                    <span class="text-lg font-bold">¥119</span>
                                    <span class="text-sm text-gray-500">/年</span>
                                    <span class="text-sm text-gray-400 line-through ml-2">¥359</span>
                                </div>
                            </div>
                            <div class="w-5 h-5 rounded-full border-2 border-blue-500 flex items-center justify-center">
                                <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <ul class="text-sm text-gray-600 space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>全站所有课程无限制观看</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>所有课程无限下载</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>专属客服7*24小时答疑</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>每月会员专属礼包</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>名师一对一答疑服务（3次/月）</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 会员卡片 - 终身 -->
                <div class="bg-white border border-gray-200 rounded-xl relative overflow-hidden">
                    <div class="p-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <div class="flex items-center">
                                    <i class="fas fa-crown text-purple-500 mr-2"></i>
                                    <h3 class="font-bold">终身会员</h3>
                                    <span class="ml-2 text-xs text-white bg-red-500 px-1.5 py-0.5 rounded">独享特权</span>
                                </div>
                                <p class="text-sm text-gray-500 mt-1">一次付费，终身使用</p>
                                <div class="mt-3">
                                    <span class="text-lg font-bold">¥599</span>
                                    <span class="text-sm text-gray-500">/终身</span>
                                    <span class="text-sm text-gray-400 line-through ml-2">¥1199</span>
                                </div>
                            </div>
                            <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
                                <div class="w-3 h-3 rounded-full bg-blue-500 hidden"></div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <ul class="text-sm text-gray-600 space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>包含年度会员所有权益</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>终身享受平台所有更新</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>专属VIP社区</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                                    <span>每年两次大咖直播课</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="px-4 py-6">
                <button class="w-full bg-blue-500 text-white font-semibold py-3 rounded-full">立即开通</button>
                <p class="text-xs text-center text-gray-500 mt-3">点击立即开通，即表示同意<a href="#" class="text-blue-500">《会员服务协议》</a></p>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-graduation-cap"></i>
                <span>学习</span>
            </div>
            <div class="tab-bar-item active">
                <i class="tab-icon fas fa-crown"></i>
                <span>会员</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 